<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/css/base.css">
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        props 拦截的变量为只读变量，vue语法会显示对props变量的修改，如果修改会在程序运行的控制提示错误；

        props 的只读限制只会出现在 Object.defineProperty 劫持的栈指向关系上，而对引用数据的堆进行修改是不会触发只读报错

        !! 该传递规则，不建议在项目中大量使用，因为违背单向数据流 => 在大型项目开发时会造成数据传递混乱且难以再次修改维护
        !! 该传递规则，可以在功能组件的小范围中使用，因为传递方式单一，可以有效规避大范围的传递 => 被应用在很多UI组件库中，简化组件使用难度
        </pre>
        <h5>父组件容器</h5>
        <p>msg:{{ obj.msg }}</p>
        <p>msg:{{ obj.info }}</p>
        <my-comp v-bind:obj="obj"></my-comp>
    </div>
    <script type="text/x-template" id="my-comp">
        <div class="cbox">
            <input type="text" v-model="obj.msg"/>
            <br>
            <input type="text"  v-model="obj.info"/>
            <br>
            <input type="button" value="重置obj" @click=" obj = {} ">
        </div>
    </script>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";

        const MyComp = {
            template:"#my-comp",
            props:["obj"]
        }
        createApp({
            components: {
                MyComp,
            },
            data(){
                return {
                    obj:{
                        msg:"msg变量",
                        info:"info变量"
                    }
                }
            }
        }).mount("#app");
    </script>
</body>
</html>